<template>
  <div id="business_num"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted,watchEffect } from "vue";


const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const initCharts=()=>{

  var chartDom = document.getElementById("business_num");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: "category",
      boundaryGap: false,
      data:props.data.map(item=>item.name),
      axisLabel: {
        //interval设置成 0 强制显示所有标签
        interval: 0,
      },
      axisTick: {
        //x轴刻度尺
        show: false,
      },
      axisLine: {//x轴线条颜色
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)'
            }
        },
    },
    yAxis: {
      type: "value",
      splitLine: {
        //网格线
        show: false, //关闭网格线
      },
      axisLine: {//y轴线条颜色
            show: true,
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)'
            }
        },
    },
    textStyle: {
      color: "rgba(255, 255, 255, 0.6)",
      fontFamily: "Source Han Sans",
      fontSize: "14px",
      fontWeight: "normal",
      lineHeight: "19.6px",
    },
    series: [
      {
        data:props.data.map(item=>item.value),
        type: "line",
        lineStyle: {
          width: 2, //外边线宽度
          color: "#7FFCFF", //外边线颜色
        },
        symbol: 'none',

        areaStyle: {
          //区域填充渐变颜色
          showSymbol: true,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(63, 196, 174, 0.4)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(63, 196, 174, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
}
watchEffect(async () => {
  
  if(props.data.length){
    initCharts()
  }
})

onMounted(() => {

 
});
</script>

<style scoped>
#business_num {
  width: 100%;
  height: 300px;
}

</style>
